<template>
  <div class="content">
    <div class="content-main">
      <div class="btn-list-wrap">
        <div>
          <span>区域: </span>
          <el-select v-model="areaValue" placeholder="请选择" clearable style="width: 200px">
            <el-option
              v-for="item in areaCodes"
              :key="item.dictionaryCode"
              :label="item.dictionaryName"
              :value="item.dictionaryCode"
            />
          </el-select>
        </div>
        <div>
          <span>行业领域: </span>
          <el-select v-model="industryValue" placeholder="请选择" clearable style="width: 200px">
            <el-option
              v-for="item in industryCodes"
              :key="item.dictionaryCode"
              :label="item.dictionaryName"
              :value="item.dictionaryCode"
            />
          </el-select>
        </div>
        <div>
          <el-button type="primary" @click="getPageList" class="button-query">查询</el-button>
        </div>
      </div>
      <div class="list-wrap">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in infoList" :key="index">
            <div class="list-info" @click="jumpPage(item)">
              <div class="list-info-img">
                <span class="item-tag item-tag-free" v-if="item.trainingType">
                  {{
                    trainingTypeCodes.find((d) => d.dictionaryCode === item.trainingType)
                      ?.dictionaryName || item.trainingType
                  }}
                </span>
                <span class="item-tag" v-if="item.registrationMethod">{{
                  registrationMethodCodes.find((d) => d.dictionaryCode === item.registrationMethod)
                    ?.dictionaryName || item.registrationMethod
                }}</span>
                <el-image
                  :src="item.coverPhoto || defaultImg"
                  fit="cover"
                  style="width: 100%; height: 180px"
                />
              </div>
              <div class="list-title">
                {{ item.title }}
              </div>
              <div class="list-info"> 开课时间: {{ item.startClassTime }} </div>
              <div class="list-info"> 培训地点: {{ item.trainingAddress }} </div>
              <div class="list-more">
                <span>查看更多</span>
                <el-icon>
                  <TopRight />
                </el-icon>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="pagination">
          <el-pagination
            :current-page="queryParams.pageNum"
            :page-size="queryParams.pageSize"
            background
            layout="prev, pager, next, jumper, total"
            :total="queryParams.total"
            @current-change="currentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { TopRight } from '@element-plus/icons-vue'
import { cmsTraining } from '@/api'
import defaultImg from '@/assets/images/center-list-bg.png'
const dictStore = useDictStore()
dictStore.fetchDictionary()
const industryCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_INDUSTRY_CODE')
})
const areaCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_AREA_CODE')
})
const trainingTypeCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_Training_Type')
})
const registrationMethodCodes = computed(() => {
  return dictStore.getDict?.filter((item) => item.siteCode === 'JLY_Registration_Method')
})

const queryParams = reactive({
  name: '',
  pageNum: 1,
  pageSize: 9,
  total: 0
})
const areaValue = ref('')
const industryValue = ref('')
const router = useRouter()
const infoList = ref([])

function jumpPage(item) {
  router.push({ path: 'conferenceTrainingDetails', query: { id: item.id } })
}

function currentChange(val) {
  queryParams.pageNum = val
  getPageList()
}

function getPageList() {
  cmsTraining({
    pageNum: queryParams.pageNum,
    pageSize: queryParams.pageSize,
    areaCode: areaValue.value,
    industryCode: industryValue.value
  }).then(({ data }) => {
    infoList.value = data.list
    queryParams.total = data.total
  })
}

onMounted(() => {
  getPageList()
})
</script>
<style lang="scss" scoped>
.button-query {
  margin-left: 10px;
}

.content {
  background-color: #f6faff;
}

.content-main {
  width: 1200px;
  min-height: 850px;
  margin: auto;
  padding-top: 20px;

  .list-wrap {
    .list-info {
      margin-bottom: 20px;
      padding-bottom: 10px;
      background-color: #fff;
      cursor: pointer;

      .list-info-img {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 180px;
        width: 100%;

        .item-tag {
          position: absolute;
          top: 15px;
          left: 65px;
          padding: 4px 10px;
          color: #333333;
          font-size: 12px;
          background-color: #efeef2;
          z-index: 1;
        }

        .item-tag-free {
          left: 10px;
          background: #ff7a00;
          color: #fff;
        }
      }

      .list-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        height: 50px;
        padding-right: 30px;
        padding-left: 20px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .list-info {
        margin-bottom: 5px;
        padding-left: 20px;
        color: #8992a9;
        font-size: 14px;
      }

      .list-more {
        margin: 10px 0;
        padding-left: 20px;
        font-size: 16px;
        color: #333333;
        cursor: pointer;
      }
    }

    .list-info-province {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 180px;
      margin-bottom: 20px;
      background: url('@/assets/images/province-bg.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .btn-list-wrap {
    display: flex;
    align-items: baseline;
    height: 40px;

    span {
      margin: 0 10px;
    }
  }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
}
</style>
